@import '@/assets/styles/iconfont';

.list-container {
  padding: 0 1em;

  .list-wrap {
    display: flex;
    align-items: center;
    margin: 20px 0;
    padding: 20px 0;
    box-shadow: 0 12px 24px -12px #f0f0f0;

    .list-preview {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100px;
      height: 100px;
      margin-right: 40px;
      border-radius: 20%;
      background-image: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);

      .icon-tiku {
        color: #fff;
        font-size: 60px;
      }
    }

    .list-info {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      flex-grow: 1;
      max-width: 80%;
      height: 120px;

      .title {
        color: #444;
        font-size: 1.2em;
        font-weight: bold;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .content {
        color: #888;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
}

.list-loading {
  position: relative;
  height: 150px;
}
